<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="jquery-3.3.1.js"></script>
	<style type="text/css">
	    *{
	    	margin:0;padding: 0;
	    }
	    img
	    {
	    	vertical-align: top;
	    }
        #top,#nav,img{
        	width:100%;height:200px;
        }

        .im,#footer{
        	height:100%!important;margin-top:20px;
        }
        .fixed{
        	position: fixed;top:0;left:0;      	
        }

	</style>
</head>
<body>
   
    <div id="top">
    	<img src="images/b.jpg" alt="">
    </div>
    <div id="nav" class="">
    	<img src="images/a.jpeg" alt="">
    </div>
    <div id="footer">
    	<img src="images/c.jpg" alt="" class="im">
    </div>

	
</body>
</html>
<script type="text/javascript">
	
    $(function(){

        $(window).scroll(function() {

            if($(window).scrollTop() >= $("#top").height())
            {
                $('#nav').addClass('fixed');
                $('#footer').css('marginTop',$('#nav').height()+20);
            }
            else
            {
                $('#nav').removeClass('fixed');
                $('#footer').css('marginTop',20);
            }
        });
    });


</script>